<template>
	<main class="favorites">
		<header>
			<titlebanner :title="'Favorites'"></titlebanner>
		</header>
		<section>
			<h1>YOU LIKED</h1>
			<ul>
				<li @click="info()" v-for="item in items">
					<img :src="item.img" alt="">
					<h3>{{item.name}}</h3>
					<span v-if="item.online"></span>
				</li>
			</ul>
		</section>
	</main>
</template>
<script>
import titlebanner from '../assets/components/title.vue'
export default{
	data(){ 
		return{
			items:[{'name':'kaley','img':require('../assets/images/Layer1191@2x.png'),'online':'1'},{'name':'bb','img':require('../assets/images/Layer1191@2x.png'),'online':0},{'name':'cc','img':require('../assets/images/Layer1191@2x.png'),'online':0},{'name':'aa','img':require('../assets/images/Layer1191@2x.png'),'online':'1'},{'name':'ee','img':require('../assets/images/Layer1191@2x.png'),'online':'1'},{'name':'ss','img':require('../assets/images/Layer1191@2x.png'),'online':'1'}]
		}
	},
	mounted(){

	},
	methods:{
		info(){
			this.$router.push({name:'profile'});
		}
	},
	components:{
		titlebanner
	}
}
</script>
<style lang="scss">
main.favorites{
	>section{
		>h1{
			text-align:center;
			font-size:0.8rem;
			margin-top:1.866667rem;
			padding-bottom:0.533333rem;
			border-bottom:3px solid #363636;
		}
		>ul{
			background-color:#ececec;
			display:flex;
			justify-content:space-between;
			align-items:center;
			flex-wrap:wrap;
			list-style:none;
			padding:0 1.066667rem;
			>li{
				flex:1;
				position:relative;
				margin-top:1.6rem;
				margin-bottom:1.066667rem;
				>img{
					display:block;
					width:6.026667rem;
					border-radius:50%;
					margin:0 auto;
					height:6.026667rem;
				}
				>h3{
					font-size: 0.96rem;
					color: #363636;
					text-align:center;
					margin-top:0.8rem;
				}
				>span{
					position:absolute;
					top:5.066667rem;
					right:2.133333rem;
					display:block;
					width:0.933333rem;
					height:0.933333rem;
					border-radius:50%;
					background-color:#4cd964;
				}
			}
		}
	}
}
</style>